<template>
	<div class="commonstyle">
		<!-- 标题 -->

		<el-form :model="$currentproperties" ref="vForm"  label-position="right" label-width="80px"
			>

			<!--      基本属性-->
			<!-- <div class="static-content-item"> -->
			<el-collapse v-model="activeNames">
				<!-- {{$currentproperties.commonstyle}} -->
				<el-collapse-item title="css代码" name="0">
					<div style="height: 150px;overflow: scroll">
						{{$currentproperties.commonstyle}}
					</div>
				</el-collapse-item>
				<el-collapse-item title="布局" name="1">
					<div class="layout-row-container">
						<el-form-item label="布局模式">
							<el-radio-group v-model="$currentproperties.commonstyle.display">
								<el-radio-button v-for="item in commonstyleDefine.display" :value="item.key"
									:key="item.key">
									<el-tooltip :content="item.value" placement="top">
										<i :class="'iconfont icon-display-' + item.key"></i>
									</el-tooltip>
								</el-radio-button>
							</el-radio-group>

						</el-form-item>

						<el-form-item label="主轴方向">
							<el-radio-group v-model="$currentproperties.commonstyle.flex_direction">
								<el-radio-button v-for="item in commonstyleDefine.flexDirection" :value="item.key"
									:key="item.key">
									<el-tooltip :content="item.value" placement="top">
										<i :class="'iconfont icon-flex-direction-' + item.key"></i>
									</el-tooltip>
								</el-radio-button>
							</el-radio-group>

						</el-form-item>

						<el-form-item label="主轴对齐">
							<el-radio-group v-model="$currentproperties.commonstyle.justify_content">
								<el-radio-button v-for="item in commonstyleDefine.justifyContent" :value="item.key"
									:key="item.key">
									<el-tooltip :content="item.value" placement="top">
										<i :class="'iconfont icon-justify-content-' + item.key"></i>
									</el-tooltip>
								</el-radio-button>
							</el-radio-group>

						</el-form-item>

						<el-form-item label="辅轴对齐">
							<el-radio-group v-model="$currentproperties.commonstyle.align_items">
								<el-radio-button v-for="item in commonstyleDefine.alignItems" :value="item.key"
									:key="item.key">
									<el-tooltip :content="item.value" placement="top">
										<i :class="'iconfont icon-align-items-' + item.key"></i>
									</el-tooltip>
								</el-radio-button>
							</el-radio-group>

						</el-form-item>

						<el-form-item label="换行">
							<el-radio-group v-model="$currentproperties.commonstyle.flex_wrap">
								<el-radio-button v-for="item in commonstyleDefine.flexWrap" :value="item.key"
									:key="item.key">
									{{item.value}}
								</el-radio-button>
							</el-radio-group>

						</el-form-item>
						<el-form-item label="宽度">
								<el-input placeholder="请输入数字" v-model.number="$currentproperties.commonstyle.width.value"
								class="input-with-select" style="width: 100%" 
								oninput="value=value.replace(/[^\d]/g,'')">

								<template #append>
									<el-select v-model="$currentproperties.commonstyle.width.type" style="width: 80px">
										<el-option label="px" value="px"></el-option>
										<el-option label="%" value="%"></el-option>
									</el-select>
								</template>

							</el-input>

						</el-form-item>

						<el-form-item label="高度">
								<el-input placeholder="请输入数字" v-model.number="$currentproperties.commonstyle.height.value"
								class="input-with-select" style="width: 100%" 
								oninput="value=value.replace(/[^\d]/g,'')">
								<template #append>
									<el-select v-model="$currentproperties.commonstyle.height.type" style="width: 80px">
										<el-option label="px" value="px"></el-option>
										<el-option label="%" value="%"></el-option>
									</el-select>
								</template>
							</el-input>

						</el-form-item>
					</div>
					<div class="layout-box-container">
						<div class="margin-top-div">
							<span class="next-input next-medium next-noborder">
								<input placeholder="0" maxlength="3" height="100%" autocomplete="off" 
								v-model.number="$currentproperties.commonstyle.margin_top.value"
								oninput="value=value.replace(/[^\d]/g,'')">
							</span>
						</div>
						<div class="margin-right-div">
							<span class="next-input next-medium next-noborder">
								<input placeholder="0" maxlength="3" height="100%" autocomplete="off" 
								v-model.number="$currentproperties.commonstyle.margin_right.value"
								oninput="value=value.replace(/[^\d]/g,'')">
							</span>
						</div>
						<div class="margin-bottom-div">
							<span class="help-txt">MARGIN</span>
							<span class="next-input next-medium next-noborder">
								<input placeholder="0" maxlength="3" height="100%" autocomplete="off" 
								v-model.number="$currentproperties.commonstyle.margin_bottom.value"
								oninput="value=value.replace(/[^\d]/g,'')">
							</span>
						</div>
						<div class="margin-left-div">
							<span class="next-input next-medium next-noborder">
								<input placeholder="0" maxlength="3" height="100%" autocomplete="off" 
								v-model.number="$currentproperties.commonstyle.margin_left.value"
								oninput="value=value.replace(/[^\d]/g,'')">
							</span>
						</div>
						<div class="padding-top-div">
							<span class="next-input next-medium next-noborder">
								<input placeholder="0" maxlength="3" height="100%" autocomplete="off" 
								v-model.number="$currentproperties.commonstyle.padding_top.value"
								oninput="value=value.replace(/[^\d]/g,'')">
							</span>
						</div>
						<div class="padding-right-div">
							<span class="next-input next-medium next-noborder">
								<input placeholder="0" maxlength="3" height="100%" autocomplete="off" 
								v-model.number="$currentproperties.commonstyle.padding_right.value"
								oninput="value=value.replace(/[^\d]/g,'')">
							</span>
						</div>
						<div class="padding-bottom-div">
							<span class="help-txt">PADDING</span>
							<span class="next-input next-medium next-noborder">
								<input placeholder="0" maxlength="3" height="100%" autocomplete="off" 
								v-model.number="$currentproperties.commonstyle.padding_bottom.value"
								oninput="value=value.replace(/[^\d]/g,'')">
							</span>
						</div>
						<div class="padding-left-div">
							<span class="next-input next-medium next-noborder">
								<input placeholder="0" maxlength="3" height="100%" autocomplete="off" 
								v-model.number="$currentproperties.commonstyle.padding_left.value"
								oninput="value=value.replace(/[^\d]/g,'')">
							</span>
						</div>
					</div>
				</el-collapse-item>
				<el-collapse-item title="文字" name="2">
					<el-form-item label="字号">
						<el-input-number v-model="$currentproperties.commonstyle.font_size" controls-position="right"
							:min="1"></el-input-number>
					</el-form-item>
					<el-form-item label="字重">
						<el-select v-model="$currentproperties.commonstyle.font_weight">
							<el-option v-for="item in commonstyleDefine.fontWeightOption" :key="item.value"
								:label="item.label" :value="item.value">

								<span style="float: left; color: #8492a6; font-size: 13px">{{ item.value }}</span>
								<span style="float: right">{{ item.label }}</span>
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="字体">
						<el-select v-model="$currentproperties.commonstyle.font_family">
							<el-option v-for="item in commonstyleDefine.fontFamilyOption" :key="item.value"
								:label="item" :value="item">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="文字颜色">
						<el-color-picker v-model="$currentproperties.commonstyle.color" show-alpha
							:predefine="commonstyleDefine.colorOption">
						</el-color-picker>
					</el-form-item>

				</el-collapse-item>

				<el-collapse-item title="背景" name="3">

				</el-collapse-item>

				<el-collapse-item title="边框" name="4">

				</el-collapse-item>
			</el-collapse>
		</el-form>

	</div>
</template>

<script>
	import utils from '@/utils/index'
	import {
		mapState,
		mapMutations
	}
	from 'vuex'
	export default {
		name: 'commonstyle',
		components: {},
		props: {
			// $currentproperties: Object,
		},


		computed: {
			...mapState(['$pageSchema', '$rightcom', '$currentproperties', '$curWidgetId', '$currentComponent']),

		},
		watch: {
			'$currentproperties.commonstyle': {
				handler(newVal, oldVal) {
					// 初始化margin和padding属性
					if (newVal.margin_top === undefined) {
						newVal.margin_top = undefined
					}
					if (newVal.margin_right === undefined) {
						newVal.margin_right = undefined
					}
					if (newVal.margin_bottom === undefined) {
						newVal.margin_bottom = undefined
					}
					if (newVal.margin_left === undefined) {
						newVal.margin_left = undefined
					}
					if (newVal.padding_top === undefined) {
						newVal.padding_top = undefined
					}
					if (newVal.padding_right === undefined) {
						newVal.padding_right = undefined
					}
					if (newVal.padding_bottom === undefined) {
						newVal.padding_bottom = undefined
					}
					if (newVal.padding_left === undefined) {
						newVal.padding_left = undefined
					}
					
					// 当值为空时清除value但保留type为%
					if (newVal.width?.value === '') {
						newVal.width.value = undefined
						newVal.width.type = '%'
					}
					if (newVal.height?.value === '') {
						newVal.height.value = undefined
						newVal.height.type = '%'
					}
					utils.convertCss(newVal)
				},
				deep: true,
				immediate: true
			}
		},

		data() {
			return {
				activeNames: ['0', '1', '2', '3', '4'],
				commonstyleDefine: {
					colorOption: [
						'#ff4500',
						'#ff8c00',
						'#ffd700',
						'#90ee90',
						'#00ced1',
						'#1e90ff',
						'#c71585',
						'rgba(255, 69, 0, 0.68)',
						'rgb(255, 120, 0)',
						'hsv(51, 100, 98)',
						'hsva(120, 40, 94, 0.5)',
						'hsl(181, 100%, 37%)',
						'hsla(209, 100%, 56%, 0.73)',
						'#c7158577'
					],
					fontFamilyOption: [
						"Helvetica Neue",
						"Helvetica",
						"PingFang SC",
						"Hiragino Sans GB",
						"Microsoft YaHei",
						"Arial",
						"sans-serif",

					],
					fontWeightOption: [{
						value: 'normal',
						label: '正常'
					}, {
						value: 'bold',
						label: '粗体'
					}, {
						value: 'bolder',
						label: '特粗体'
					}, {
						value: 'lighter',
						label: '细体'
					}, {
						value: '100',
					}, {
						value: '200',
					}, {
						value: '300',
					}, {
						value: '400',
					}, {
						value: '500',
					}, {
						value: '600',
					}, {
						value: '700',
					}, {
						value: '800',
					}, {
						value: '900',
					}, ],
					display: [{
							key: 'inline',
							value: '内联布局'
						},
						{
							key: 'flex',
							value: '弹性布局'
						},
						{
							key: 'block',
							value: '块级布局'
						},
						{
							key: 'inline-block',
							value: '内联块布局'
						},
						{
							key: 'none',
							value: '隐藏'
						}
					],
					flexDirection: [{
							key: 'row',
							value: '水平方向，起点在左侧'
						}, {
							key: 'row-reverse',
							value: '水平方向，起点在右侧'
						},
						{
							key: 'column',
							value: '垂直方向，起点在上沿'
						},
						{
							key: 'column-reverse',
							value: '垂直方向，起点在下沿'
						},
					],
					justifyContent: [{
							key: 'flex-start',
							value: '左对齐'
						}, {
							key: 'flex-end',
							value: '右对齐'
						},
						{
							key: 'center',
							value: '水平居中'
						},
						{
							key: 'space-between',
							value: '两端对齐'
						},
						{
							key: 'space-around',
							value: '横向平分'
						},
					],
					alignItems: [{
							key: 'flex-start',
							value: '左对齐'
						}, {
							key: 'flex-end',
							value: '右对齐'
						},
						{
							key: 'center',
							value: '水平居中'
						},
						{
							key: 'baseline',
							value: '跟第一行对齐'
						},
						{
							key: 'stretch',
							value: '占满整个容器高度'
						},
					],
					flexWrap: [{
							key: 'nowrap',
							value: '不换行'
						},
						{
							key: 'wrap',
							value: '正换行'
						},
						{
							key: 'wrap-reverse',
							value: '逆换行'
						},
					]
				}

			}
		},
		methods: {}
	}
</script>

<style scoped lang="scss">
	.commonstyle {

		// 布局图形

		.layout-row-container {


			::v-deep  .el-form-item {
				margin-bottom: 15px;
			}

			::v-deep  .input-with-select .el-select .el-input {
				width: 80px;
			}
			
			::v-deep  .el-select-dropdown__item {
				padding: 0 20px;
			}
		}

		.layout-box-container {
			position: relative;
			width: 100%;
			height: 150px;

			.help-txt {
				float: left;
				margin-left: -10px;
				-webkit-transform: scale(.75);
				-ms-transform: scale(.75);
				transform: scale(.75);
			}

			.next-input {
				position: absolute;
				height: 20px !important;
				background: transparent;
				border: none;
			}


			input {
				text-align: center;
				line-height: 20px;
				height: 20px;
				padding: 0;
			}


			.margin-top-div {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				height: 0;
				border-left: 20px solid transparent;
				border-right: 20px solid transparent;
				border-top: 20px solid #d6e4ff;
				-webkit-transition: all .3s ease;
				transition: all .3s ease;

				.next-medium {
					left: 0;
					right: 0;
					top: -20px;
					width: 100%;

				}


			}

			.margin-right-div {
				position: absolute;
				top: 5px;
				bottom: 5px;
				right: 0;
				width: 0;
				border-top: 20px solid transparent;
				border-bottom: 20px solid transparent;
				border-right: 20px solid #d6e4ff;
				-webkit-transition: all .3s ease;
				transition: all .3s ease;

				.next-medium {
					top: 0;
					bottom: 0;
					right: -20px;
					width: 20px;
					margin: auto;
				}
			}

			.margin-bottom-div {
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				height: 0;
				border-left: 20px solid transparent;
				border-right: 20px solid transparent;
				border-bottom: 20px solid #d6e4ff;
				-webkit-transition: all .3s ease;
				transition: all .3s ease;

				.next-medium {
					left: 0;
					right: 0;
					bottom: -20px;

				}
			}

			.margin-left-div {
				position: absolute;
				top: 5px;
				bottom: 5px;
				left: 0;
				width: 0;
				border-top: 20px solid transparent;
				border-bottom: 20px solid transparent;
				border-left: 20px solid #d6e4ff;
				-webkit-transition: all .3s ease;
				transition: all .3s ease;

				.next-medium {
					top: 0;
					bottom: 0;
					left: -20px;
					width: 20px;
					margin: auto;
				}
			}

			.padding-top-div {
				position: absolute;
				top: 25px;
				left: 25px;
				right: 25px;
				height: 0;
				border-left: 20px solid transparent;
				border-right: 20px solid transparent;
				border-top: 20px solid #d6e4ff;
				-webkit-transition: all .3s ease;
				transition: all .3s ease;

				.next-medium {
					left: 0;
					right: 0;
					top: -20px;
				}

			}

			.padding-right-div {
				position: absolute;
				top: 30px;
				bottom: 30px;
				right: 25px;
				width: 0;
				border-top: 20px solid transparent;
				border-bottom: 20px solid transparent;
				border-right: 20px solid #d6e4ff;
				-webkit-transition: all .3s ease;
				transition: all .3s ease;

				.next-medium {
					top: 0;
					bottom: 0;
					right: -20px;
					width: 20px;
					margin: auto;
				}
			}

			.padding-bottom-div {
				position: absolute;
				bottom: 25px;
				left: 25px;
				right: 25px;
				height: 0;
				border-left: 20px solid transparent;
				border-right: 20px solid transparent;
				border-bottom: 20px solid #d6e4ff;
				-webkit-transition: all .3s ease;
				transition: all .3s ease;

				.next-medium {
					left: 0;
					right: 0;
					bottom: -20px;

				}
			}

			.padding-left-div {
				position: absolute;
				top: 30px;
				bottom: 30px;
				left: 25px;
				width: 0;
				border-top: 20px solid transparent;
				border-bottom: 20px solid transparent;
				border-left: 20px solid #d6e4ff;
				-webkit-transition: all .3s ease;
				transition: all .3s ease;

				.next-medium {
					top: 0;
					bottom: 0;
					left: -20px;
					width: 20px;
					margin: auto;
				}
			}
		}
	}
</style>
